<template>
  <div class="ranking-card" @click="handleClick">
    <n-card :bordered="false" class="item-card">
      <div class="card-content">
        <!-- 排名标识 -->
        <div class="rank-badge" :class="getRankClass(rank)">
          <span class="rank-number">{{ rank }}</span>
        </div>

        <!-- 物品信息 -->
        <div class="item-info">
          <!-- 物品图片和基本信息 -->
          <div class="item-header">
            <div class="item-image">
              <n-avatar
                :size="isMobile ? 40 : 48"
                :src="item.image"
                :fallback-src="'/images/default-item.png'"
                round
              />
              <div class="grade-indicator" :class="`grade-${item.grade}`">
                {{ item.grade }}
              </div>
            </div>
            
            <div class="item-basic">
              <div class="item-name">
                <n-text strong>{{ item.name }}</n-text>
                <n-tag
                  :type="getLocationTagType(item.location)"
                  size="small"
                  round
                >
                  {{ item.location }}
                </n-tag>
              </div>
              <div class="item-category">
                <n-text :depth="3" style="font-size: 12px;">
                  {{ item.primary_class }}
                  <span v-if="item.second_class_cn"> · {{ item.second_class_cn }}</span>
                </n-text>
              </div>
            </div>
          </div>

          <!-- 核心数据 -->
          <div class="item-data">
            <div class="data-grid">
              <!-- 利润信息 -->
              <div class="data-item highlight">
                <div class="data-label">每小时利润</div>
                <div class="data-value profit">
                  {{ formatNumber(item.profit_per_hour) }}
                  <span class="unit">哈夫币/时</span>
                </div>
              </div>

              <div class="data-item">
                <div class="data-label">净利润</div>
                <div class="data-value">
                  {{ formatNumber(item.lirun) }}
                  <span class="unit">哈夫币</span>
                </div>
              </div>

              <div class="data-item">
                <div class="data-label">单个利润</div>
                <div class="data-value">
                  {{ formatNumber(item.profit_per_item) }}
                  <span class="unit">哈夫币</span>
                </div>
              </div>

              <!-- 成本信息 -->
              <div class="data-item">
                <div class="data-label">售价</div>
                <div class="data-value">{{ formatNumber(item.sale_price) }}</div>
              </div>

              <div class="data-item">
                <div class="data-label">成本</div>
                <div class="data-value">{{ formatNumber(item.cost_price) }}</div>
              </div>

              <div class="data-item">
                <div class="data-label">手续费</div>
                <div class="data-value">{{ formatNumber(item.fee) }}</div>
              </div>

              <!-- 生产信息 -->
              <div class="data-item">
                <div class="data-label">周期</div>
                <div class="data-value">
                  {{ item.period }}
                  <span class="unit">小时</span>
                </div>
              </div>

              <div class="data-item">
                <div class="data-label">数量</div>
                <div class="data-value">{{ item.per_count }}</div>
              </div>

              <div class="data-item">
                <div class="data-label">保证金</div>
                <div class="data-value">{{ formatNumber(item.bail) }}</div>
              </div>
            </div>
          </div>

          <!-- 材料信息 -->
          <div v-if="showMaterials && parsedMaterials.length" class="materials-section">
            <div class="materials-header">
              <n-text :depth="2" style="font-size: 13px; font-weight: 500;">
                所需材料
              </n-text>
            </div>
            <div class="materials-list">
              <material-tooltip
                v-for="material in parsedMaterials"
                :key="material.id"
                :material="material"
              />
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="item-actions">
          <n-button
            size="small"
            type="primary"
            ghost
            @click.stop="handleViewDetail"
          >
            查看详情
          </n-button>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import type { SpecialOperationItem, ParsedMaterial } from '@/types/specialOperation'

// 导入子组件
import MaterialTooltip from './MaterialTooltip.vue'

// Props
const props = defineProps<{
  item: SpecialOperationItem
  rank: number
  showMaterials?: boolean
}>()

// Emits
const emit = defineEmits<{
  click: [item: SpecialOperationItem]
  'view-detail': [item: SpecialOperationItem]
}>()

// 响应式数据
const isMobile = ref(false)

// 移动端检测
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 解析材料信息
const parsedMaterials = computed<ParsedMaterial[]>(() => {
  if (!props.item.materials) return []
  
  try {
    const materials = JSON.parse(props.item.materials)
    return Object.entries(materials).map(([id, count]) => ({
      id,
      name: `材料#${id.slice(-4)}`,
      count: Number(count)
    }))
  } catch {
    return []
  }
})

// 获取排名样式类
const getRankClass = (rank: number): string => {
  if (rank === 1) return 'rank-first'
  if (rank === 2) return 'rank-second'
  if (rank === 3) return 'rank-third'
  if (rank <= 10) return 'rank-top10'
  return 'rank-normal'
}

// 获取位置标签类型
const getLocationTagType = (location: string): string => {
  const typeMap: Record<string, string> = {
    '工作台': 'info',
    '技术中心': 'success',
    '制药台': 'warning',
    '防具': 'error'
  }
  return typeMap[location] || 'default'
}

// 格式化数字
const formatNumber = (num: number): string => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toFixed(0)
}

// 处理点击事件
const handleClick = () => {
  emit('click', props.item)
}

// 处理查看详情
const handleViewDetail = () => {
  emit('view-detail', props.item)
}

// 生命周期
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.ranking-card {
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ranking-card:hover {
  transform: translateY(-1px);
}

.item-card {
  border: 1px solid var(--n-border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--n-card-color);
}

.card-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}

.rank-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.rank-first {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #b45309;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.rank-second {
  background: linear-gradient(135deg, #c0c0c0, #e5e7eb);
  color: #374151;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
}

.rank-third {
  background: linear-gradient(135deg, #cd7f32, #d97706);
  color: white;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
}

.rank-top10 {
  background: var(--n-primary-color-suppl);
  color: var(--n-primary-color);
  border: 1px solid var(--n-primary-color);
}

.rank-normal {
  background: var(--n-card-color);
  color: var(--n-text-color-3);
  border: 1px solid var(--n-border-color);
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-image {
  position: relative;
  flex-shrink: 0;
}

.grade-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  border: 2px solid var(--n-card-color);
}

.grade-1 { background: #909399; }
.grade-2 { background: #67c23a; }
.grade-3 { background: #409eff; }
.grade-4 { background: #e6a23c; }
.grade-5 { background: #f56c6c; }

.item-basic {
  flex: 1;
  min-width: 0;
}

.item-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.item-category {
  opacity: 0.8;
}

.item-data {
  width: 100%;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-item.highlight {
  padding: 8px;
  background: var(--n-primary-color-suppl);
  border-radius: 6px;
  border: 1px solid var(--n-primary-color);
}

.data-label {
  font-size: 12px;
  color: var(--n-text-color-3);
  font-weight: 500;
}

.data-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--n-text-color);
}

.data-value.profit {
  color: var(--n-success-color);
  font-size: 16px;
}

.unit {
  font-size: 11px;
  color: var(--n-text-color-3);
  font-weight: normal;
  margin-left: 2px;
}

.materials-section {
  border-top: 1px solid var(--n-border-color);
  padding-top: 12px;
}

.materials-header {
  margin-bottom: 8px;
}

.materials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .card-content {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .rank-badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .data-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .data-item.highlight {
    padding: 6px;
  }
  
  .data-value.profit {
    font-size: 14px;
  }
  
  .item-actions {
    align-self: stretch;
  }
  
  .item-actions .n-button {
    width: 100%;
  }
}
</style>
